<template>
	<el-container style="position:absolute;width:100%;height: 100%;">
		<el-header>
			<div class="stores-name">
				{{storesName}}
			</div>
			<div class="menu-control-btn">
				<i v-show="!isCollapse" class="iconfont icon-shousuo" @click="handleCollapse"></i>
				<i v-show="isCollapse" class="iconfont icon-zhankai" @click="handleCollapse"></i>
			</div>
			<div class="user-quit">
				<span class="shop-recruitment">{{shopRecruitment}}</span>
				<span class="user">{{userName}}</span>
				<span class="quit" @click="quit">退出</span>
			</div>
		</el-header>
		<el-container>
			<el-aside :width="asideWidth">
				<el-menu :default-active="defaultActive" unique-opened :default-openeds="defaultOpends" class="menu-box" :collapse="isCollapse" router>
					<el-submenu index="billConfirm">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>对账单</span>
						</template>
						<el-menu-item index="BillList">对账单确认</el-menu-item>
						<el-menu-item index="Signature">账单签章</el-menu-item>
					</el-submenu>
					<el-menu-item index="" @click="alertMessage">
						<i class="el-icon-menu"></i>
						<span slot="title">报表查询</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		name: 'zd-main',
		data() {
			return {
				isCollapse:false,//侧边菜单是否折叠
				asideWidth:'200px',
				defaultOpends:['billConfirm'], // 当前打开的 sub-menu 的 index 的数组
				defaultActive:'BillList'
			}
		},
		computed:{
			loginResData(){
				// 从本地读取登录信息
				try{
					if(localStorage.getItem('loginResData')){
						return JSON.parse(localStorage.getItem('loginResData'))
					} else {
						throw new Error('localStorage中的loginResData不存在，请退出重新登录')
					}
				}catch(err){
					this.$message.error(`${err}`)
				}
			},
			storesName(){
				return this.loginResData.stores[0].name			
			},
			userName(){
				return this.loginResData.name	
			},
			shopRecruitment() {
				return this.loginResData.stores[0].contracts[0].name
			}
		},
		methods: {
			handleCollapse(){
				this.isCollapse = !this.isCollapse;
				if(this.isCollapse){
					this.asideWidth = '64px'
				}else{
					this.asideWidth = '200px';
				}
			},
			quit(){
				// 清除本地存储
				localStorage.removeItem('loginResData')				
				localStorage.removeItem('currentBillNoOfBillList')
				localStorage.removeItem('fetchParams')
				sessionStorage.removeItem('accessToken')
				sessionStorage.removeItem('tableDataAll')
				// 跳转到登录页				
				this.$router.push({
					path:'/Login'
				})
			},
			alertMessage(){
				this.$message('该功能暂不提供服务');
			}
		},
		mounted:function(){
			// 页面刷新时候重新激活当前菜单的 index
			this.defaultActive = this.$route.path.split('/')[2]
		}
	}
</script>

<style scoped lang="scss">
	.el-header {
		background-color: #409EFF;
		color: #333;
		height: 60px;
		padding: 0px;
		display: flex;
		align-items: center;
	}
	
	.el-aside {
		background-color: #FFFFFF;
		color: #333;
		text-align: center;
	}
	
	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		padding: 10px;
	}
	.el-submenu .el-menu-item{
		min-width: auto;
	}
	.menu-box {
		text-align: left;
	}
	
	.stores-name {
		width: 180px;
		padding-left:20px;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 20px;
	}
	
	.menu-control-btn {
		width: 40px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		.iconfont {
			font-size: 22px;
			cursor: pointer;
			color: #FFFFFF;
		}
	}
	.user-quit{
		flex-grow: 1;
		color:white;
		display: flex;
		justify-content: flex-end;
		padding-right: 60px;
		.user{
			margin-right: 20px;
		}
		.shop-recruitment{
			margin-right: 20px;
		}
		.quit{
			cursor: pointer;
		}
	}
</style>